<template>
    <div>
        <div class="title">
            <div class="left">
                <img class="imgOne" src="@/assets/images/bigViewIMG/blue.png" alt="">
                <img class="imgTwo" src="@/assets/images/xzcf.png" alt="">
                <span>外部行政处罚情况</span>
            </div>
        </div>
        <div class="searchTable">
                <el-table v-loading="loading" :data="testArray" style="width: 100%" :cell-style="{ color: '#fff' }"
                    :header-cell-style="{ color: '#00ffff' }" height="200">
                    <template slot="empty">
                    
                        <span style="color:#9d9d9d;font-size: 25px;font-weight: 700;">查无数据</span>
                    </template>
                    <el-table-column type="index" label="序号">
                    </el-table-column>
                    <el-table-column prop="cfCfmc" label="处罚名称">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.cfCfmc" placement="top">
                                <span
                                    style=" display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; white-space: pre-line;">
                                    {{ scope.row.cfCfmc }}
                                </span>
                        
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cfSy" label="处罚事由">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.cfSy" placement="top">
                                <span
                                    style=" display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; white-space: pre-line;">
                                    {{ scope.row.cfSy }}
                                </span>
                        
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cfJg" label="处罚结果">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.cfJg" placement="top">
                                <span
                                    style=" display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; white-space: pre-line;">
                                    {{ scope.row.cfJg }}
                                </span>
                        
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cfJdrq"  label="处罚决定日期">
                    </el-table-column>
                   
                </el-table>
               <div class="bottom">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                        :page-size="size" layout="prev, pager, next" :total="total">
                    </el-pagination>
               </div>
        </div>

        
           
    </div>
</template>

<script>
import { decrypt } from '@/utils/AES.js'
import { reqAdministrativeSanction } from '@/api/home/index.js'
export default {
    data(){
        return {
            testArray: [
                // { time:'2022/01/01', message: '走私', price:'5000.00',notes:'' },
                // { time:'2022/01/01', message: '走私', price:'5000.00',notes:'' },
                // { time:'2022/01/01', message: '走私', price:'5000.00',notes:'' },
                // { time:'2022/01/01', message: '走私', price:'5000.00',notes:'' },
                // { time:'2022/01/01', message: '走私', price:'5000.00',notes:'' },
                // { time:'2022/01/01', message: '走私', price:'5000.00',notes:'' },
                // { time:'2022/01/01', message: '走私', price:'5000.00',notes:'' }
            ],
            total:0,
            page:1,
            size:10,
            loading:false
        }
    },
    computed:{
      

    },
    watch:{
        $route: {
            handler(val) {
                if (val.path == '/visual/thirdView/basicFileMap') {
                    this.getList()
                } else {
                    return
                }
            },
            deep: true
        }
    },
    created(){
        this.getList()
    },
    methods:{
        async getList() {
            let query = JSON.parse(decrypt(this.$route.query.key))
            // this.loading=true
            const res=await reqAdministrativeSanction({fullName:query.company,page:this.page,size:this.size})
            
            
            if(res.code==500) {
                return this.loading = false
            }
            // console.log(res);
            this.testArray=res.data.list
            this.total = res.data.total
            // this.loading=false
        },

        handleSizeChange(val) {
            this.size=val
            this.getList()
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page=val
            this.getList()
            // console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style lang="scss" scoped>
.title {
    height: 40px;
    display: flex;

    .left {
        width: 500px;
        display: flex;
        align-items: center;

        .imgOne {
            width: 35px;
            height: 40px;
        }

        .imgTwo {
            width: 22px;
            height: 21px;
            margin-left: 10px;
        }

        span {
            color: #fff;
            font-size: 16px;
            margin-left: 8px;
        }
    }
}
.searchTable {
    padding-right: 5px;
    .bottom {
        margin-top:5px;
        display: flex;
        justify-content: flex-end;
        ::v-deep .el-pagination {
            .btn-prev {
                background: transparent;
            }
            .btn-next {
                background: transparent;
            }
            .el-pager {
                .number {
                    color: #fff;
                }
                                .active {
                                    color: #1890ff;
                                    cursor: default;
                                }
                li {
                    background: transparent;
                   
                }
            }
        }
    }
    ::v-deep .el-table,
        ::v-deep .el-table__expanded-cell {
            background-color: transparent !important;
    
        }
    
    
        /* 表格内背景颜色 */
    
        ::v-deep .el-table tr,
        ::v-deep .el-table td {
            background-color: transparent !important;
            border-bottom: none;
        }
    
        ::v-deep .el-table th {
            background-color: #013689 !important;
            border-bottom: none;
    
        }
    
        ::v-deep .el-table td {
            border-bottom: none;
        }
    
        ::v-deep .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
        }
                ::v-deep .el-loading-mask {
                    background-color: rgba(255, 255, 255, 0);
        
        
                    .el-loading-spinner .path {
                        stroke: #c23531;
                    }
                }
}
</style>